<template>
	<view>
		<cu-page-bg></cu-page-bg>
		<view class="cu-w-100">
			<cu-navbar title="设置" :placeholder="true" @leftClick="vk.navigateBack()" :showLeft="true" :leftIconColor="{color:backgroundStyle.color}" :titleStyle="{color:backgroundStyle.color}" :style="getBackgroundStyle"
				bgColor="rgb(255,255,255,0)"></cu-navbar>
			<view class="cu-w-100">
				<cu-card>
					<u-cell-group :border="false">
						<u-cell  title="初始化" @click="clickCardItem('init-bg')">
							<cu-icon custom-prefix="iconfont" slot="icon" size="24" name="icon-chushihuazhong"></cu-icon>
						</u-cell>
						<u-cell  title=" 设置背景" :border="false" @click="vk.myfn.gotoPage('/pages/oauth/setbg/index','navigate')">
							<cu-icon custom-prefix="iconfont" slot="icon" size="24"  name="icon-yanse"></cu-icon>
							<view slot="right-icon"><u-icon name="arrow-right"></u-icon></view>
						</u-cell>
					</u-cell-group>
				</cu-card>
				<cu-card :style="cardStyle">
					<u-cell-group :border="false">
						<u-cell  title=" 退出登录" :border="false" @click="clickCardItem('loginout')">
							<cu-icon slot="icon" size="24" custom-prefix="iconfont" name="icon-tuichu"></cu-icon>
						</u-cell>
					</u-cell-group>
				</cu-card>
			</view>
		
			<u-modal :show="showModal" @close="closeModal" @cancel="closeModal" @confirm="confirmModal" ref="uModal"
				:title="modal.title" :content='modal.content' :zoom="true" :showCancelButton="true"
				:closeOnClickOverlay="true"></u-modal>
		</view>
	</view>
</template>

<script>
	let vk = uni.vk;
	export default {
		computed: {
			getBackgroundStyle() {
				let style = {};
				style.background = "linear-gradient(45deg, " + this.main + ", " + this.secondary + ")";
				// 合并用户传递的背景色对象
				Object.assign(style, this.backgroundStyle);
				return style;
			}
		},
		data() {
			return {
				main: vk.getVuex('$app.color.main'),
				secondary: vk.getVuex('$app.color.secondary'),
				buttonColor: "linear-gradient(to right, " + vk.getVuex('$app.color.main') + "," + vk.getVuex('$app.color.secondary')+ ")",
				backgroundStyle: {
					color: "#FFF"
				},
				cardStyle:{"marginTop" : "20rpx"},
				showModal: false,
				modelType:"",
				modal: {
					title: '温馨提示',
					content: '确认退出么？'
				},
			};
		},
		onLoad(options) {
			vk = uni.vk;
			this.init(options);
		},
		onShow() {
			this.init(undefined);
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				this.main = vk.getVuex('$app.color.main');
				this.secondary = vk.getVuex('$app.color.secondary');
			},
			// 退出登录
			loginOut(){
				vk.setVuex("$user", undefined)
				uni.removeStorageSync('uni_id_token');
				uni.removeStorageSync('uni_id_token_expired');
				vk.toast("退出成功", "success"); // 带成功的图标
				setTimeout(()=>{vk.reLaunch("/pages/index/index");},500)
			},
			initBgParam(){
				vk.setVuex('$app.color.main', "#0095f8");
				vk.setVuex('$app.color.secondary', "#67C23A");
				const data = {
					url: "/static/back-img.jpg"
				}
				this.$store.dispatch('$app/updateBgImg',data);
			},
			clickCardItem(type) {
				if (type && type === 'loginout') {
					this.modelType = "loginout";
					this.modal.content = "确认退出么？";
					this.showModal = true;
				}
				else if (type && type === 'init-bg') {
					this.modelType = "init-bg";
					this.modal.content = "确认初始化背景？";
					this.showModal = true;
				}
			},
			closeModal() {
				this.showModal = false;
			},
			confirmModal() {
				if (this.modelType === "loginout") {
					this.loginOut()
				}
				else if (this.modelType === "init-bg") {
					this.initBgParam();
				}
				this.showModal = false;
			},
			
		}
	};
</script>

<style lang="scss" scoped>

</style>